<template>
  <div id="app">
    <Carousel autoplay v-model="value2">
      <Carousel-item>
        <div class="demo-carousel">混吃等死第一张</div>
      </Carousel-item>
      <Carousel-item>
        <div class="demo-carousel">混吃等死第二张</div>
      </Carousel-item>
      <Carousel-item>
        <div class="demo-carousel">混吃等死第萨满张</div>
      </Carousel-item>
      <Carousel-item>
        <div class="demo-carousel">混吃等死第一张</div>
      </Carousel-item>
    </Carousel>
    <!--商品、电影、导航按钮-->
    <div class="index-tab">
      <!-- 相应店铺 -->
      <router-link to="/shop"><p><i></i><span>美食</span></p></router-link>
      <router-link to="/movie"><p><i></i><span>电影</span></p></router-link>
      <router-link to="/travel"><p><i></i><span>读书(还没写)</span></p></router-link>
    </div>
    <!--路由视图-->
    <router-view></router-view>
    <!--美食点评头条-->
    <div class="remark">
      <div class="remark-title">不知<br>写啥</div>
      <div class="remark-con">精选专题：端午，你打算怎么过？</div>
      <div class="remark-img"></div>
    </div>
    <!--分割线-->
    <div class="cut-line"></div>
    <!--优惠专区-->
    <div class="preferential">
      <div class="preferential-left">
        <router-link to="/shop"><p><i></i><span>美食</span></p></router-link>
      </div>
      <div class="preferential-middle">
        <span></span>
        <span></span>
      </div>
      <div class="preferential-right">
        <span></span>
        <span></span>
      </div>
    </div>
    <!--分割线-->
    <div class="cut-line"></div>
  </div>
</template>

<script>
/* eslint-disable  */
import shop from "./components/shop/shop.vue"

export default {
  data() {
    return {
      value2: 0
    }
  },
  components: {
    shop
  }
}
</script>

<style>
  #app .demo-carousel{width: 100%; height: 150px;background: #ccc;font-size: 14px;}
  #app .index-tab{width: 100%;display: flex;border-bottom: #f1f1f1 1px solid;}
  #app .index-tab a{flex: 1;margin: 5%; color: #333;display: flex; align-items: center; justify-content: center;}
  #app .index-tab a p{ text-align: center;font-size: 14px;}
  #app .index-tab a i{width: 46px; height: 46px; background: #ccc;display: block;border-radius: 8px;margin: 0 auto;}
  #app .index-tab a span{margin-top: 8px;display: block;}
  #app .remark{padding:0 15px;display: flex; align-items: center;}
  #app .remark-con,.remark-img,.remark-title{display: inline-block; font-size: 14px;}
  #app .remark-title{color:#3BBDEC; font-weight: bold;border-right: #f1f1f1 1px solid;margin: 8px;padding-right: 15px;}
  #app .remark-con{color: #333;flex: 1;}
  #app .remark-img{width: 32px; height: 32px; background: #ccc;}
  #app .cut-line{height: 20px; width: 100%; background: #f7f7f7;}
  #app .preferential{padding:15px;display: flex;height: 200px;}
  #app .preferential-left{flex: 1.5;background: #ccc;height: 100%;}
  #app .preferential-left a{display: block;height: 100%;}
  #app .preferential-middle,.preferential-right{flex: 1;margin-left: 8px;height: 100%;}
  #app .preferential-middle{display: flex;flex-direction: column;}
  #app .preferential-middle span{flex: 1; background: #ccc;}
  #app .preferential-middle span:nth-of-type(2){margin-top:8px;}
  #app .preferential-right{display: flex;flex-direction: column;}
  #app .preferential-right span{flex: 1; background: #ccc;}
  #app .preferential-right span:nth-of-type(2){margin-top:8px;}
</style>
